<template>
  <div>
    <div style="text-align: left; margin-bottom: 5px;">
      <el-button size="mini" type="primary" @click="toAdd">添加</el-button>
    </div>

    <!--添加或新增角色弹窗-->
    <el-dialog :title=formTitle :visible.sync="flagShowForm">
      <el-form :model="formData" label-width="100px">
        <el-form-item label="角色名称" required>
          <el-input v-model="formData.name" placeholder="请输入角色名称" maxlength="20">
          </el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="formData.description" placeholder="描述信息" maxlength="100"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="resetForm">重置</el-button>
          <el-button type="primary" @click="submitForm">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!--角色授权对话框-->
    <el-dialog title="角色授权" :visible.sync="flagShowSetPermission">
      <div style="max-height: 60vh; overflow-y: scroll">
        <!--树形控件 配置角色权限-->
        <el-tree
            ref="permissionTree"
            show-checkbox
            :data="permissionTree"
            node-key="permission"
            default-expand-all
            :default-checked-keys="formData.permissionList">
        </el-tree>
      </div>
      <el-button @click="clearChecked">清空</el-button>
      <el-button type="primary" @click="setPermissions">确定</el-button>
    </el-dialog>


    <!--列表-->
    <el-table :data="roleList" :default-sort="{prop: 'id'}">
      <el-table-column label="id" prop="id" sortable></el-table-column>
      <el-table-column prop="name" label="角色名称"></el-table-column>
      <el-table-column prop="description" label="描述"></el-table-column>
      <el-table-column label="操作" width="170px">
        <template slot-scope="scope">
          <el-button @click="toSetPermissions(scope.row)" type="text" size="small"
                     :disabled="scope.row.permissionList.indexOf('*')>=0">
            设置权限
          </el-button>
          <el-button @click="toEdit(scope.row)" type="text" size="small">编辑</el-button>
          <el-button @click="deleteRole(scope.row)" type="text" size="mini"
                     :disabled="scope.row.permissionList.indexOf('*')>=0">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
import * as roleAdminApi from '../../api/system/roleAdminApi'

export default {
  data() {
    return {
      shopList: [], // 店铺列表
      formTitle: '添加角色',
      flagShowForm: false,
      flagShowSetPermission: false, // 角色授权对话框
      roleList: [],
      formData: {},
      permissionTree: [],
    }
  },
  mounted() {
    this.getRoleList()
    roleAdminApi.getPermissionTree({
      success: res => {
        this.permissionTree = res.data
      }
    })
  },
  methods: {
    getRoleList() {
      roleAdminApi.getRoleList({
        success: res => {
          this.roleList = res.data
        }
      })
    },
    // 重置表单
    resetForm() {
      this.formData = {
        shopId: 0,
        name: "",
        description: "",
        permissionList: []
      };
    },
    toAdd() {
      this.resetForm()
      this.flagShowForm = true;
      this.formTitle = '添加角色';
    },
    toEdit(role) {
      this.formData = JSON.parse(JSON.stringify(role));
      this.flagShowForm = true
      this.formTitle = '更新角色'
    },
    // 提交表单
    submitForm() {
      this.formData.name = this.formData.name.trim()
      if (this.formData.name.length === 0) {
        this.$message.error("角色名称不能为空")
        return
      }

      if (this.formTitle.startsWith("添加")) {
        roleAdminApi.addRole({
          data: this.formData,
          success: () => {
            this.flagShowForm = false
            this.getRoleList()
          }
        })
      } else {
        roleAdminApi.updateRole({
          data: this.formData,
          success: () => {
            this.flagShowForm = false
            this.getRoleList()
          }
        })
      }
    },
    // 删除角色
    deleteRole(role) {
      this.$confirm(`是否删除角色：${role.name}`).then(() => {
        roleAdminApi.deleteRole({
          roleId: role.id,
          success: () => {
            this.getRoleList()
          }
        })
      }).catch(() => {
      })
    },
    // 打开角色授权对话框
    toSetPermissions(role) {
      this.flagShowSetPermission = true;
      this.formTitle = '更新角色';
      this.formData = JSON.parse(JSON.stringify(role));
      this.clearChecked();
    },
    // 清空全部选中的
    clearChecked() {
      if (this.$refs['permissionTree'])
        this.$refs['permissionTree'].setCheckedKeys([]);
    },
    setPermissions() {
      let nodes = this.$refs.permissionTree.getCheckedNodes(true) // 获取被选中的节点 (是否只是叶子节点)
      let permissions = [];
      nodes.forEach(node => {
        if (node.permission) {
          permissions.push(node.permission);
        }
      })
      this.formData.permissionList = permissions

      roleAdminApi.updateRole({
        data: this.formData,
        success: () => {
          this.flagShowSetPermission = false;
          this.getRoleList()
        }
      })
    },
  }
}
</script>
<style>
</style>
